<template>
    <div class="circleCompent-container">
      <div class="dataCharts">
        <div class="dataChart" v-if="detailCatagrayCountSet">
          <div class="detailChart0"><div class="detailChart31">{{detailCatagrayCount}}</div></div>
          <div>{{titleName[0]}}</div>
        </div>
        <div class="dataChart"  v-if="detailProductCountSet">
          <div class="detailChart1"><div class="detailChart31">{{detailProductCount}}</div></div>
          <div>{{titleName[1]}}</div>
        </div>
        <div class="dataChart" v-if="detailOnLineSet">
          <div class="detailChart2"><div class="detailChart31">{{detailOnLine}}</div></div>
          <div>{{titleName[2]}}</div>
        </div>
        <div class="dataChart" v-if="detailOffLineSet">
          <div class="detailChart3"><div class="detailChart31">{{detailOffLine}}</div></div>
          <div>{{titleName[3]}}</div>
        </div>
        <div class="dataChart" v-if="percentSet">
          <div class="detailChart4"><div class="detailChart31">{{percent}}</div></div>
          <div>{{titleName[4]}}</div>
        </div>
      </div>
    </div>
</template>

<script>
  export default {
    name: "circle-compent",
    props:{
      detailCatagrayCount:'',
      detailProductCount: '',
      detailOnLine: '',
      detailOffLine: '',
      percent:'',
      titleName:{
        type: Array,
        default: () => []
      }
    },
    data() {
        return {}
    },
    computed:{
      detailCatagrayCountSet(){
        return (this.detailCatagrayCount || this.detailCatagrayCount === 0 || this.detailCatagrayCount === 0.00) ? true : false
      },
      detailProductCountSet(){
        return (this.detailProductCount || this.detailProductCount === 0 || this.detailCatagrayCount === 0.00) ? true : false
      },
      detailOnLineSet(){
        return (this.detailOnLine || this.detailOnLine === 0 || this.detailOnLine === 0.00) ? true : false
      },
      detailOffLineSet(){
        return (this.detailOffLine || this.detailOffLine === 0 || this.detailOffLine === 0.00) ? true : false
      },
      percentSet(){
        return (this.percent || this.percent === 0 || this.percent === 0.00) ? true : false
      }
    }
  }
</script>

<style scoped>
  .circleCompent-container{
    width: 100%;
  }
  .dataCharts {
    display: flex;
    margin: 15px 0;
  }
  .dataChart div{
    font-weight: bold;
  }
  .dataChart {
    flex-basis: 25%;
    flex: 1;
    text-align: center;
  }
  .detailChart0 {
    margin: 20px auto;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    background: linear-gradient(#f8db73, #fc8e90);
    transform: scale(1.1);
    font-size: 16px;
    line-height: 92px;
    box-shadow:0px 6px 8px #eacbcb, 6px 0px 8px #eacbcb, 0px -6px 8px #fdf8c2, -6px 0px 8px #fdf8c2;

  }
  .detailChart1 {
    margin: 20px auto;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    background: linear-gradient(#d4e770, #5ed87b);
    transform: scale(1.1);
    font-size: 16px;
    line-height: 92px;
    box-shadow:0px 6px 8px #cbeacf, 6px 0px 8px #cbeacf, 0px -6px 8px #f5fedb, -6px 0px 8px #f5fedb;
  }
  .detailChart2 {
    margin: 20px auto;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    background: linear-gradient(#4ed195, #40c6cd);
    transform: scale(1.1);
    font-size: 16px;
    line-height: 92px;
    box-shadow:0px 6px 8px #cbe8ea, 6px 0px 8px #cbe8ea, 0px -6px 8px #ccfdc2, -6px 0px 8px #ccfdc2;
  }

  .detailChart3{
    margin: 20px auto;
    font-size: 16px;
    line-height: 92px;
    position: relative;
    width: 100px;
    height: 100px;
    text-align: center;
    border-radius: 50%;
    background: linear-gradient(#7bbcf0, #9798e7);
    transform: scale(1.1);
    box-shadow:0px 6px 8px #d7cbea, 6px 0px 8px #d7cbea, 0px -6px 8px #c2edfd, -6px 0px 8px #c2edfd;
  }
  .detailChart4{
    margin: 20px auto;
    font-size: 16px;
    line-height: 92px;
    position: relative;
    width: 100px;
    height: 100px;
    text-align: center;
    border-radius: 50%;
    background: linear-gradient(#ee87a7, #aa94dc);
    transform: scale(1.1);
    box-shadow:0px 6px 8px #d7cbea, 6px 0px 8px #d7cbea, 0px -6px 8px #ffdffb, -6px 0px 8px #ffdffb;
  }
  .detailChart31{
    position: absolute;
    content: '';
    background: #F6F6F6;
    bottom: 6px;
    right: 6px;
    left: 6px;
    top:6px;
    z-index: 0;
    border-radius: 50%;
  }
</style>
